<template>
    <div class="body">
        <div class="hg_title">
            <div></div>
            <dl @click="turnBlank(1, { categoryId: '3403058925235393576' })">
                <dd>新闻中心</dd>
                <dt>NEWS CENTER</dt>
            </dl>
            <div></div>
        </div>
        <div class="hg_newbox">
            <div
                class="hg_newboxlef"
                @click="
                    turnBlank(2, { typeId: pubData.typeId, id: pubData.id })
                "
            >
                <img :src="pubData.imgUrl" alt="" />
                <h5>
                    <p>
                        {{ pubData.name }}
                    </p>
                </h5>
            </div>

            <div class="hg_newboxrig">
                <div class="hg_boxlist">
                    <a
                        v-for="(item, index) in dataList"
                        :key="index"
                        @click="
                            turnBlank(2, { typeId: item.typeId, id: item.id })
                        "
                        :class="{ hgn_active: index === icurli }"
                        @mouseover="changeMouse(index, item)"
                        @mouseleave="changeMouse(0, dataList[0])"
                    >
                        <div class="hgn_lef">
                            <h1>{{ item.publishTime.split('-')[2] }}</h1>
                            <h2>
                                {{ item.publishTime.split('-')[0] }}/{{
                                    item.publishTime.split('-')[1]
                                }}
                            </h2>
                        </div>
                        <div class="hgn_cen"></div>
                        <div class="hgn_rig">
                            <h1>
                                {{ item.name }}
                            </h1>
                            <h2>{{ item.cmsArticle.content }}</h2>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil';
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('hgModule');
export default {
    name: 'test',
    data() {
        return {
            icurli: 0,
            pubData: {
                imgUrl: '',
                name: '',
                typeId: '',
                id: '',
            },
            dataList: [],
            icur: '3403058925235393576',
            title: '新闻中心',
        };
    },
    computed: {},
    mounted() {
        this.getdataList(1, 4, this.icur);
    },
    methods: {
        ...mapActions(['getdataListsAsync']),
        changeMouse(index, item) {
            this.icurli = index;
            this.pubData = {
                imgUrl: item.cmsFile[0]
                    ? item.cmsFile[0].path
                    : require('@/assets/img/hg/bannerceshi.png'),
                name: item.name,
                typeId: item.typeId,
                id: item.id,
            };
        },
        turnBlank(type, Parameters) {
            appUtil.routerUrl(type, Parameters, this.title, this.icur);
        },
        getdataList(pn, ps, categoryId) {
            this.getdataListsAsync({
                pn,
                ps,
                categoryId,
            }).then((res) => {
                this.dataList = res.data.dataList;
                for (let i = 0; i < this.dataList.length; i++) {
                    if (this.dataList[i].cmsArticle) {
                        this.dataList[
                            i
                        ].cmsArticle.content = appUtil.strIntercept(
                            this.dataList[i].cmsArticle.content
                        );
                    }
                }
                this.pubData = {
                    imgUrl: this.dataList[0].cmsFile[0]
                        ? this.dataList[0].cmsFile[0].path
                        : require('@/assets/img/hg/bannerceshi.png'),
                    name: this.dataList[0].name,
                    typeId: this.dataList[0].typeId,
                    id: this.dataList[0].id,
                };
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.body {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.hg_title {
    width: 100%;
    min-width: 1200px;
    height: 70px;
    margin: 20px auto 10px;

    div {
        width: 44%;
        height: 8px;
        background: #d8d8d8;
        border-radius: 2px;
        opacity: 0.3;
        float: left;
        margin-top: 18px;
    }

    dl {
        float: left;
        width: 12%;
        text-align: center;
        cursor: pointer;

        dd {
            font-size: 28px;
            font-weight: bold;
            color: #094194;
        }

        dt {
            font-size: 18px;
            font-weight: bold;
            color: #094194;
            opacity: 0.2;
            margin-top: -6px;
        }
    }
}

.hg_newbox {
    width: 96%;
    padding: 0 2%;
    padding-bottom: 30px;

    .hg_newboxlef {
        width: 511px;
        height: 339px;
        float: left;
        position: relative;
        overflow: hidden;
        cursor: pointer;

        img {
            width: 100%;
        }

        h5 {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            background: #000000;
            opacity: 0.59;
            height: 44px;
            line-height: 44px;

            p {
                font-size: 16px;
                font-weight: 400;
                color: #ffffff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 10px;
                max-width: 300px;
            }
        }
    }

    .hg_newboxrig {
        margin-left: 531px;
        height: 339px;

        .hg_boxlist {
            .hgn_active {
                .hgn_lef {
                    h1 {
                        color: #246ed9;
                    }
                    h2 {
                        color: #246ed9;
                    }
                }
                .hgn_rig {
                    h1 {
                        color: #246ed9;
                    }
                }
            }
            a {
                width: 96%;
                display: inline-block;
                background: #f8f8f8;
                padding: 20px 2%;
                border: 1px solid #eaeaea;
                cursor: pointer;

                .hgn_lef {
                    float: left;
                    width: 14.5%;
                    h1 {
                        font-size: 26px;
                        font-weight: bold;
                        color: #666666;
                        text-align: right;
                        margin: 3px 0;
                    }
                    h2 {
                        font-size: 18px;
                        color: #666666;
                        font-weight: normal;
                        text-align: right;
                    }
                }

                .hgn_cen {
                    float: left;
                    margin: 0 2%;
                    width: 2px;
                    height: 68px;
                    background: #e7e7e7;
                }

                .hgn_rig {
                    float: right;
                    width: 81%;

                    h1 {
                        font-size: 18px;
                        font-weight: 600;
                        color: #333333;

                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    h2 {
                        font-size: 14px;
                        font-weight: 400;
                        color: #666666;
                        margin-top: 10px;

                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                }
            }
        }
    }
}
</style>
